<template>
  <d2-container>
    <div class="tdesign-demo-block">
      <t-alert
        theme="info"
        message="有XXX条申述未处理"
        style="margin-top: 20px"
      >
        <template #operation>
          <span @click="handleOperation">立即处理</span>
        </template>
      </t-alert>
    </div>
    <!--
    <div>
      <t-button @click="setFilters">清除筛选条件</t-button>
      <span style="padding-left: 36px">已选筛选条件：{{ filterValue }}</span>
    </div> -->

    <t-table
      :data="data"
      :columns="columns"
      :rowKey="data.id"
      :verticalAlign="verticalAlign"
      :loading="isLoading"
      :pagination="pagination"
      @change="rehandleChange"
      :expandOnRowClick="expandOnRowClick"
      :filter-value="filterValue"
      @filter-change="onFilterChange"
      style="margin-top: 20px"
    >
      <template #op='{row}'>
        <!-- ="slotProps" -->
        <!-- <a class="link" @click="rehandleClickOp(slotProps)">管理</a>
        <a class="link" @click="rehandleClickOp(slotProps)">删除</a> -->
        <t-button theme="success" @click="testPush(row)">
          <HistoryIcon slot="icon" />
          申诉
        </t-button>
      </template>
    </t-table>
  </d2-container>
</template>

<script>
import { HistoryIcon } from 'tdesign-icons-vue'
// import { MessagePlugin } from "tdesign-vue";
import util from '@/libs/util.js'
export default {
  components: {
    HistoryIcon
  },
  data() {
    return {
      data: [],
      isLoading: false,
      filterValue: {},
      expandOnRowClick: true,
      columns: [
        {
          width: 100,
          colKey: 'id',
          title: 'id'
          // render(h, { row: { name } }) {
          //   return name ? `${name.first} ${name.last}` : "UNKNOW_USER";
          // },
        },
        {
          width: 120,
          colKey: 'carId',
          title: '违规车牌',
          filter: {
            type: 'input',
            resetValue: '',
            props: {
              placeholder: '输入关键词过滤',
              clearable: true
            },
            // 是否显示重置取消按钮
            showConfirmAndReset: true
          }
        },
        {
          width: 180,
          colKey: 'time',
          title: '违规时间',
          filter: {
            component: (h) => <t-date-picker clearable />
          }
          //   filter: {
          //     type: "single",
          //     // showConfirmAndReset: true,
          //     list: [
          //       { label: "SUPER_ADMIN", value: "SUPER_ADMIN" },
          //       { label: "ADMIN", value: "ADMIN" },
          //       { label: "USER", value: "USER" },
          //     ],
          //   },
          // render(h, { row: { phone } }) {
          //   return phone;
          // },
        },
        {
          width: 100,
          colKey: 'illustrate',
          title: '违规事件',
          filter: {
            type: 'input',
            resetValue: '',
            props: {
              placeholder: '输入关键词过滤',
              clearable: true
            },
            // 是否显示重置取消按钮
            showConfirmAndReset: true
          }
        },
        {
          width: 200,
          colKey: 'operate',
          title: '操作',
          cell: 'op',
          align: 'center'
        }
      ],
      // rowKey: "property",
      tableLayout: 'auto',
      verticalAlign: 'top',
      rowClassName: 'property-class',
      pagination: {
        current: 1,
        pageSize: 10
      }
    }
  },
  async mounted() {
    await this.fetchData(this.pagination)
  },
  methods: {
    async fetchData(pagination = this.pagination) {
      try {
        this.isLoading = true
        const { current, pageSize } = pagination
        const response = await fetch('/api/violation/findAll', {
          body: JSON.stringify({
            page: current,
            amount: pageSize
          }),
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer${util.cookies.get('token')}`
          }
        }).then((x) => x.json())
        // console.log('response', response)
        this.data = response.records

        // console.log(this.data)
        this.pagination = {
          ...pagination,
          total: response.total
        }
        // console.log("分页数据", response.obj.list);
      } catch (err) {
        console.log(err)
        this.data = []
      }
      this.isLoading = false
    },
    // 也可以使用 page-change 事件
    async rehandleChange(changeParams, triggerAndData) {
      console.log(
        '分页、排序、过滤等发生变化时会触发 change 事件：',
        changeParams,
        triggerAndData
      )
      if (changeParams.pagination === undefined) return
      const { current, pageSize } = changeParams.pagination
      const pagination = { current, pageSize }
      await this.fetchData(pagination)
    },
    //
    rehandleClickOp({ text, row }) {
      // console.log(text, row)
    },
    rehandleSelectChange(value, { selectedRowData }) {
      this.selectedRowKeys = value
      // console.log(value, selectedRowData)
    },
    onFilterChange(filters) {
      this.filterValue = filters
      // 模拟异步请求进行数据过滤
      this.request(this.filterValue)
    },
    async request(filters) {
      // console.log(filters)
      const response = await fetch('/api/violation/filter', {
        body: JSON.stringify(filters),
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization:
            `Bearer${this.$store.state.d2admin.user.token}`
        }
      }).then((x) => x.json())
      // console.log('response', response)
      this.data = response.obj
      this.pagination.total = this.data.length
    },
    handleOperation() {
      console.log('test')
    },

    // 申述接口
    async testPush(e) {
      // 数据
      const V_DATA = {
        id: e.id,
        reason: `${this.$store.state.d2admin.user.info.name}申述`
      }
      console.log(V_DATA)
    const res = await fetch('/api/violation/appeal',{
      method: 'POST',
      headers: {
'Content-Type': 'application/json',
 Authorization:
        `Bearer${this.$store.state.d2admin.user.token}`
      },
      body: JSON.stringify(V_DATA)
    }).then(res => res.json())
    .then(data => {
switch (data.code) {
        case 200:
            this.$message.success(data.message)

            break
        case 500:
            this.$message.error({
                content: data.message
            })

            break
    }
        })
    }
  }
}
</script>
